<template>
    <div class="interactive-forum">
      <el-container>
        <el-aside width="250px" >
          <el-scrollbar wrap-class="scrollbar-wrap">
            <ul class="nav-list">
              <li v-for="(item, index) in navItems" :key="index" @click="selectNavItem(item)">
              </li>
            </ul>
          </el-scrollbar>
        </el-aside>
        <el-main style="margin-left: -250px;">
          <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
            <el-tab-pane label="讨论区" name="discussion">
              <DiscussionSection />
            </el-tab-pane>
            <el-tab-pane label="问答社区" name="qa">
              <QaCommunity />
            </el-tab-pane>
            <el-tab-pane label="在线答疑" name="liveAnswering">
              <LiveAnswering />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue';
  import { ElContainer, ElAside, ElMain, ElScrollbar, ElTabs, ElTabPane } from 'element-plus';
  import DiscussionSection from './DiscussionSection.vue';
  import QaCommunity from './QaCommunity.vue';
  import LiveAnswering from './LiveAnswering.vue';
  const selectNavItem = (item) => {
    activeTab.value = item.label.toLowerCase();
  };
  
  const activeTab = ref('discussion');
  
  const handleTabClick = () => {
    // 这里可以添加额外的逻辑处理
    
  };
  </script>
  
  <style scoped>
  .interactive-forum {
    height: 100%;
    width: 1350px;
    margin-left: 165px;
    background-color: #a5c69523;
  }
  
  .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-list li {
    padding: 10px;
    cursor: pointer;
  }
  
  .nav-list .active {
    font-weight: bold;
    color: #338de8;
  }
  
  .scrollbar-wrap {
    height: 100%;
  }
  </style>
  